<template>
	<view>
		<image class="bg" src="/static/images/photo/bg.jpg" mode="scaleToFill"></image>
		<view class="main">
			<uni-section title="数据统计"  type="line" />
			<view class="store">
				<view class="store-item" @click="historyClick">
					<view class="num">{{historyLen}}</view>
					<view class="title">预览数</view>
				</view>
				<view class="store-item" @click="cellClick">
					<view class="num">{{zanHistory}}</view>
					<view class="title">点赞数</view>
				</view>
				<view class="store-item" @click="downClick">
					<view class="num">{{downDoneFileLen}}</view>
					<view class="title">作品数</view>
				</view>
			</view>
			<view class="menu">
				<view class="menu-item" hover-stay-time="50" @click="githubCopy">
					<view class="left-side">
						<image src="/static/images/photo/icon/github.png"></image>
						<view class="title">Github</view>
					</view>
					<view class="right-side">
						<uni-icons type="right" size="18" />
					</view>
				</view>
				<view class="menu-item" hover-stay-time="50" @click="giteeCopy">
					<view class="left-side">
						<image src="/static/images/photo/icon/gitee.png"></image>
						<view class="title">Gitee</view>
					</view>
					<view class="right-side">
						<uni-icons type="right" size="18" />
					</view>
				</view>
				<view class="menu-item" hover-stay-time="50" @click="deleteClick">
					<view class="left-side">
						<image src="/static/images/photo/icon/delete.png"></image>
						<view class="title">清除缓存</view>
					</view>
					<view class="right-side">
						<uni-icons type="right" size="18" />
					</view>
				</view>
				<view class="menu-item" hover-stay-time="50" @click="aboutClick">
					<view class="left-side">
						<image src="/static/images/photo/icon/developer.png"></image>
						<view class="title">关于作者</view>
					</view>
					<view class="right-side">
						<uni-icons type="right" size="18" />
					</view>
				</view>
			</view>
		</view>
		<foot-tab :index="3" @switchTab="switchTab"></foot-tab>
	</view>

</template>

<script>
	import {cmsEssayStatic} from "@/api/cms/cmsBlog";
  export default {

		data() {
			return {
				zanHistory: 0,
				downDoneFileLen: 0,
				historyLen: 0,
			}
		},
		onShow() {
			this.zanHistory = uni.getStorageSync('zanHistory').length || 0
			this.historyLen = uni.getStorageSync('readHistory').length || 0
		},
		onLoad() {
			uni.hideTabBar()
		},
		methods: {

      getCmsEssayStatic() {
        cmsEssayStatic(data).then(res => {
              if (res.data == null || res.data == '') {
                uni.showToast({
                  title: '未查询到数据！',
                  icon: 'none',
                  duration: 1000
                });
              }else {
                console.log(res)
                this.zanHistory = res.data.zanHistory;
                this.downDoneFileLen = res.data.downDoneFileLen;
                this.historyLen = res.data.historyLen;
              }
            }
        )
      },
			showToast(message) {
				uni.showToast({
					title: message,
					duration: 1500,
					icon: 'none',
				});
			},
			githubCopy() {
				//uni.setClipboardData 内容复制到粘贴板
				uni.setClipboardData({
					data: "https://github.com/Rickmoti", //要被复制的内容
					success: () => { //复制成功的回调函数
						this.showToast('已复制github开源链接')
					}
				});
			},
			giteeCopy() {
				//uni.setClipboardData 内容复制到粘贴板
				uni.setClipboardData({
					data: "https://gitee.com/liu_zi_ming", //要被复制的内容
					success: () => { //复制成功的回调函数
						this.showToast('已复制gitee开源链接')
					}
				});
			},
			deleteClick() {
				uni.setStorageSync('readHistory', [])
				this.showToast("清除成功")
				this.zanHistory = uni.getStorageSync('zanHistory').length || 0
				this.historyLen = uni.getStorageSync('readHistory').length || 0
			},
			aboutClick() {
				let site = {
				  title: "关于作者",
				  url: "https://docs.record2life.top/"
				}
				uni.setClipboardData({
					data: "https://docs.record2life.top/", //要被复制的内容
					success: () => { //复制成功的回调函数
						this.showToast('已复制地址，请使用浏览器打开查看')
					}
				});
				this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
			},
			downClick() {
				uni.navigateTo({
					url: "/pages/photo/list/list"
				})
			},
			cellClick() {

			},
			historyClick() {

			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.bg {
		width: 100vw;
		-webkit-mask: linear-gradient(0deg, transparent, #fff 65%);
	}

	.main {
		padding: 0 32rpx;

		.store {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			background: #f7fbff;
			border-radius: 24rpx;

			.store-item:first-child {
				margin-left: 0;
			}

			.store-item:last-child {
				margin-right: 0;
			}

			.store-item {
				flex: 1;
				padding: 36rpx;
				margin: 0 16rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: black;
				border-radius: 24rpx;
				white-space: nowrap;

				.num {
					font-size: 52rpx;
					font-weight: 900;
					color: transparent;
					background-clip: text;
					background-image: linear-gradient(135deg, #a1c4fd, #c2e9fb);
					margin-bottom: 16rpx;
				}
			}
		}

		.menu {
			margin-top: 36rpx;
			background: white;
			border-radius: 24rpx;
			background: #f7fbff;

			.menu-item:last-child {
				border-bottom: none;
			}

			.menu-item {
				display: flex;
				justify-content: space-between;
				padding: 36rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #efefef;

				.left-side {
					display: flex;

					.title {
						margin-left: 24rpx;
					}
				}
			}

			image {
				width: 38rpx;
				height: 38rpx;
			}
		}
	}
</style>
